<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--><html lang="en"><!--<![endif]-->

<head>
<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="description" content="">
<meta name="author" content="">

<!-- Bootstrap Stylesheet -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" media="screen">

<!-- jquery-ui Stylesheets -->
<link rel="stylesheet" href="assets/jui/css/jquery.ui.all.css" media="screen">
<link rel="stylesheet" href="assets/jui/jquery-ui.custom.css" media="screen">
<link rel="stylesheet" href="assets/jui/timepicker/jquery-ui-timepicker.css" media="screen">

<!-- Uniform Stylesheet -->
<link rel="stylesheet" href="plugins/uniform/css/uniform.default.css">

<!-- Google Prettify -->
<link rel="stylesheet" href="plugins/prettify/themes/theme-balupton.css">

<!-- Plugin Stylsheets first to ease overrides -->

<!-- End Plugin Stylesheets -->

<!-- Main Layout Stylesheet -->
<link rel="stylesheet" href="assets/css/fonts/icomoon/style.css" media="screen">
<link rel="stylesheet" href="assets/css/main-style.css" media="screen">

<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<title>MoonCake :: Responsive Admin Template</title>

</head>

<body>

    <div id="customizer">
        <div id="showButton"><i class="icon-cogs"></i></div>
        <div id="layoutMode">
            <label class="checkbox"><input type="checkbox" class="uniform" name="layout-mode" value="boxed"> Boxed</label>
        </div>
    </div>
    
	<div id="wrapper">
        <header id="header" class="navbar navbar-inverse">
            <div class="navbar-inner">
                <div class="container">
					<div class="brand-wrap pull-left">
						<div class="brand-img">
							<a class="brand" href="#">
								<img src="assets/images/logo.png" alt="">
							</a>
						</div>
					</div>
                    
                    <div id="header-right" class="clearfix">
						<div id="nav-toggle" data-toggle="collapse" data-target="#navigation" class="collapsed">
							<i class="icon-caret-down"></i>
						</div>
						<div id="header-search">
							<span id="search-toggle" data-toggle="dropdown">
								<i class="icon-search"></i>
							</span>
							<form class="navbar-search">
								<input type="text" class="search-query" placeholder="Search">
							</form>
						</div>
						<div id="dropdown-lists">
							<a class="item" href="#">
								<span class="item-icon"><i class="icon-exclamation-sign"></i></span>
								<span class="item-label">Notifications</span>
								<span class="item-count">4</span>
							</a>
							<a class="item" href="mail.html">
								<span class="item-icon"><i class="icon-envelope"></i></span>
								<span class="item-label">Messages</span>
								<span class="item-count">16</span>
							</a>
						</div>
                        
                        <div id="header-functions" class="pull-right">
                        	<div id="user-info" class="clearfix">
                                <span class="info">
                                	Welcome
                                    <span class="name">Shana-chan</span>
                                </span>
                            	<div class="avatar">
                                	<a class="dropdown-toggle" href="#" data-toggle="dropdown">
                                    	<img src="assets/images/pp.jpg" alt="Avatar">
                                    </a>
                                    <ul class="dropdown-menu pull-right">
                                    	<li><a href="profile.html"><i class="icol-user"></i> My Profile</a></li>
                                    	<li><a href="#"><i class="icol-layout"></i> My Invoices</a></li>                                        
                                        <li class="divider"></li>
                                        <li><a href="index.html"><i class="icol-key"></i> Logout</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div id="logout-ribbon">
                            	<a href="index.html"><i class="icon-off"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        
        <div id="content-wrap">
        	<div id="content">
            	<div id="content-outer">
                	<div id="content-inner">
                    	<aside id="sidebar">
                        	<nav id="navigation" class="collapse">
                            	<ul>
                                	<li class="active">
                                    	<span title="General">
                                    		<i class="icon-home"></i>
											<span class="nav-title">General</span>
                                        </span>
                                    	<ul class="inner-nav">
                                        	<li><a href="dashboard.html"><i class="icol-dashboard"></i> Dashboard</a></li>
                                        	<li><a href="calendar.html"><i class="icol-calendar-2"></i> Calendar</a></li>
                                            <li><a href="icons.html"><i class="icol-lifebuoy"></i> Icons</a></li>
                                        	<li><a href="grids.html"><i class="icol-grid"></i> Grids</a></li>
                                        	<li class="active"><a href="typography.html"><i class="icol-font"></i> Typography</a></li>
                                        </ul>
                                    </li>
                                	<li>
                                    	<span title="Table">
                                    		<i class="icon-table"></i>
											<span class="nav-title">Table</span>
                                        </span>
                                    	<ul class="inner-nav">
                                        	<li><a href="tables.html"><i class="icol-style"></i> Static Tables</a></li>
                                        	<li><a href="responsive_tables.html"><i class="icol-hammer-screwdriver"></i> Responsive Tables</a></li>
                                        	<li><a href="data_tables.html"><i class="icol-table"></i> Data Tables</a></li>
                                            <li><a href="detail_view.html"><i class="icol-eye"></i> Detail View Table</a></li>
                                        </ul>
                                    </li>
                                	<li>
                                    	<span title="Statistic">
                                        	<i class="icon-graph"></i>
											<span class="nav-title">Statistic</span>
                                        </span>
                                    	<ul class="inner-nav">
                                        	<li><a href="statistic.html"><i class="icol-chart-curve"></i> Statistical Elements</a></li>
                                        	<li><a href="charts_gallery.html"><i class="icol-chart-pie"></i> Charts Gallery</a></li>
                                        </ul>
                                    </li>
                                	<li>
                                    	<span title="Form">
                                        	<i class="icon-list"></i>
											<span class="nav-title">Form</span>
                                        </span>
                                    	<ul class="inner-nav">
                                        	<li><a href="form_layouts.html"><i class="icol-layout-select"></i> Form Layouts</a></li>
                                        	<li><a href="form_elements.html"><i class="icol-ui-text-field-password"></i> Form Elements</a></li>
											<li><a href="form_wizard.html"><i class="icol-wand"></i> Form Wizard</a></li>
                                        	<li><a href="form_validation.html"><i class="icol-accept"></i> Form Validation</a></li>
                                            <li><a href="wysiwyg.html"><i class="icol-pencil"></i> WYSIWYG</a></li>
                                        </ul>
                                    </li>
                                	<li>
                                    	<span title="Elements">
                                        	<i class="icon-cogs"></i>
											<span class="nav-title">Elements</span>
                                        </span>
                                    	<ul class="inner-nav">
                                        	<li><a href="ui_bootstrap.html"><i class="icol-ui-tab-content"></i> Bootstrap Elements</a></li>
											<li><a href="ui_components.html"><i class="icol-pipette"></i> Other Elements</a></li>
                                        	<li><a href="alerts.html"><i class="icol-error"></i> Alerts and Notifications</a></li>
											<li><a href="boxes.html"><i class="icol-cog"></i> Widget Boxes</a></li>
                                        	<li><a href="buttons.html"><i class="icol-joystick"></i> Buttons</a></li>
                                        	<li><a href="file_uploader.html"><i class="icol-computer"></i> File Uploader</a></li>
											<li><a href="file_manager.html"><i class="icol-databases"></i> File Manager</a>
                                        </ul>
                                    </li>
                                	<li>
                                    	<span title="Extra">
                                        	<i class="icon-gift"></i>
											<span class="nav-title">Extra</span>
                                        </span>
                                        <ul class="inner-nav">
                                            <li><a href="profile.html"><i class="icol-user"></i> Profile Page</a></li>
                                            <li><a href="mail.html"><i class="icol-email"></i> Mail Page</a></li>
                                            <li><a href="widgets.html"><i class="icol-ruby"></i> Custom Widgets</a></li>
                                            <li><a href="gallery.html"><i class="icol-images"></i> Image Gallery</a>
                                            <li><a href="contacts.html"><i class="icol-vcard"></i> Contact List</a></li>
                                            <li><a href="404.html"><i class="icol-error"></i> Error Page (404)</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </nav>
                        </aside>

                        <div id="sidebar-separator"></div>
                        
                        <section id="main" class="clearfix">
                        	<div id="main-header" class="page-header">
                            	<ul class="breadcrumb">
                                	<li>
                                    	<i class="icon-home"></i>MoonCake
                                        <span class="divider">&raquo;</span>
                                    </li>
                                    <li>
                                    	<a href="#">General</a>
                                        <span class="divider">&raquo;</span>
                                    </li>
                                    <li>
                                    	<a href="#">Typography</a>
                                    </li>
                                </ul>
                                
                                <h1 id="main-heading">
                                	Typography <span>Typography is the art and technique of arranging type in order to make language visible</span>
                                </h1>
                            </div>
                            
                            <div id="main-content">
                                <div class="row-fluid">

                                	<div class="span6 widget">
										<div class="widget-content">
											<h1>h1. Heading 1</h1>
											<h2>h2. Heading 2</h2>
											<h3>h3. Heading 3</h3>
											<h4>h4. Heading 4</h4>
											<h5>h5. Heading 5</h5>
											<h6>h6. Heading 6</h6>
										</div>
                                    </div>
                                    <div class="span6">
                                        <div class="widget">
                                            <div class="widget-content">
                                                <h4>Labels</h4>
                                                <p>
                                                    <span class="label">Default</span>
                                                    <span class="label label-success">Success</span>
                                                    <span class="label label-warning">Warning</span>
                                                    <span class="label label-important">Important</span>
                                                    <span class="label label-info">Info</span>
                                                    <span class="label label-inverse">Inverse</span>
                                                </p>
                                            </div>
                                        </div>
                                        <div class="widget">
                                            <div class="widget-content">
                                                <h4>Badges</h4>
                                                <p>
                                                    <span class="badge">Default</span>
                                                    <span class="badge badge-success">Success</span>
                                                    <span class="badge badge-warning">Warning</span>
                                                    <span class="badge badge-important">Important</span>
                                                    <span class="badge badge-info">Info</span>
                                                    <span class="badge badge-inverse">Inverse</span>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row-fluid">

									<div class="span6 widget">
										<div class="widget-content">
											<h3>Parapgraph</h3>
											
											<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
											<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
											<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
                                        </div>
                                    </div>

                                    <div class="span6 widget">
                                        <div class="widget-content">
                                            <h4>Emphasis</h4>

                                            <p><small>This line of text is meant to be treated as fine print.</small></p>
                                            <p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
                                            <p>The following snippet of text is <em>rendered as bold text</em>.</p>

                                            <h4>Emphasis Colors</h4>
                                            
                                            <p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
                                            <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
                                            <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
                                            <p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
                                            <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="row-fluid">

                                    <div class="span6 widget">
                                        <div class="widget-content clearfix">
                                            <h4>Abbreviations</h4>
                                            <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr></p>
                                            <h4>Address</h4>
                                            <address>
                                                <strong>Twitter, Inc.</strong><br>
                                                795 Folsom Ave, Suite 600<br>
                                                San Francisco, CA 94107<br>
                                                <abbr title="Phone">P:</abbr> (123) 456-7890
                                            </address>
                                            <address>
                                                <strong>Full Name</strong><br>
                                                <a href="mailto:#">first.last@gmail.com</a>
                                            </address>
                                        </div>
                                    </div>

                                    <div class="span6 widget">
                                        <div class="widget-content clearfix">
                                            <h4>Blockquotes</h4>
                                            <blockquote>
                                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                                                <small>Someone famous <cite title="Source Title">Source Title</cite></small>
                                            </blockquote>
                                            <blockquote class="pull-right">
                                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                                                <small>Someone famous <cite title="Source Title">Source Title</cite></small>
                                            </blockquote>
                                        </div>
                                    </div>
                                </div>

                                <div class="row-fluid">

                                    <div class="span12 widget">
                                        <div class="widget-content">
                                            <div class="row-fluid">
                                                <div class="span4">
                                                    <h4>Unordered List</h4>
                                                    <ul>
                                                        <li>Lorem ipsum dolor sit amet</li>
                                                        <li>Consectetur adipiscing elit</li>
                                                        <li>Integer molestie lorem at massa</li>
                                                        <li>Facilisis in pretium nisl aliquet</li>
                                                        <li>Nulla volutpat aliquam velit
                                                            <ul>
                                                            <li>Phasellus iaculis neque</li>
                                                            <li>Purus sodales ultricies</li>
                                                            <li>Vestibulum laoreet porttitor sem</li>
                                                            <li>Ac tristique libero volutpat at</li>
                                                            </ul>
                                                        </li>
                                                        <li>Faucibus porta lacus fringilla vel</li>
                                                        <li>Aenean sit amet erat nunc</li>
                                                        <li>Eget porttitor lorem</li>
                                                    </ul>
                                                </div>
                                                <div class="span4">
                                                    <h4>Ordered List</h4>
                                                    <ol>
                                                        <li>Lorem ipsum dolor sit amet</li>
                                                        <li>Consectetur adipiscing elit</li>
                                                        <li>Integer molestie lorem at massa</li>
                                                        <li>Facilisis in pretium nisl aliquet</li>
                                                        <li>Nulla volutpat aliquam velit</li>
                                                        <li>Faucibus porta lacus fringilla vel</li>
                                                        <li>Aenean sit amet erat nunc</li>
                                                        <li>Eget porttitor lorem</li>
                                                    </ol>
                                                </div>
                                                <div class="span4">
                                                    <h4>Unstyled List</h4>
                                                    <ul class="unstyled">
                                                        <li>Lorem ipsum dolor sit amet</li>
                                                        <li>Consectetur adipiscing elit</li>
                                                        <li>Integer molestie lorem at massa</li>
                                                        <li>Facilisis in pretium nisl aliquet</li>
                                                        <li>Nulla volutpat aliquam velit
                                                            <ul>
                                                            <li>Phasellus iaculis neque</li>
                                                            <li>Purus sodales ultricies</li>
                                                            <li>Vestibulum laoreet porttitor sem</li>
                                                            <li>Ac tristique libero volutpat at</li>
                                                            </ul>
                                                        </li>
                                                        <li>Faucibus porta lacus fringilla vel</li>
                                                        <li>Aenean sit amet erat nunc</li>
                                                        <li>Eget porttitor lorem</li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row-fluid">

                                    <div class="span12 widget">
                                        <div class="widget-content">
                                            <div class="row-fluid">
                                                <div class="span6">
                                                    <h4>Description</h4>
                                                    <dl>
                                                        <dt>Description lists</dt>
                                                        <dd>A description list is perfect for defining terms.</dd>
                                                        <dt>Euismod</dt>
                                                        <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
                                                        <dd>Donec id elit non mi porta gravida at eget metus.</dd>
                                                        <dt>Malesuada porta</dt>
                                                        <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
                                                    </dl>
                                                </div>
                                                <div class="span6">
                                                    <h4>Horizontal Description</h4>
                                                    <dl class="dl-horizontal">
                                                        <dt>Description lists</dt>
                                                        <dd>A description list is perfect for defining terms.</dd>
                                                        <dt>Euismod</dt>
                                                        <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
                                                        <dd>Donec id elit non mi porta gravida at eget metus.</dd>
                                                        <dt>Malesuada porta</dt>
                                                        <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
                                                        <dt>Felis euismod semper eget lacinia</dt>
                                                        <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
                                                    </dl>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row-fluid">

                                    <div class="span6">
                                        <div class="widget">
                                            <div class="widget-content">
                                                <h4>Code View</h4>
<pre>
while( i-- ) {
    if( vendorPrefixes[i] + 'Transform' in divStyle && 
        vendorPrefixes[i] + 'TransformOrigin' in divStyle &&
        vendorPrefixes[i] + 'Transition' in divStyle )
        return true;
}
</pre>
                                            </div>
                                        </div>
                                        <div class="widget">
                                            <div class="widget-content">
                                                <h4>With Google Prettify</h4>
<pre class="prettyprint theme-balupton linenums">
while( i-- ) {
    if( vendorPrefixes[i] + 'Transform' in divStyle && 
        vendorPrefixes[i] + 'TransformOrigin' in divStyle &&
        vendorPrefixes[i] + 'Transition' in divStyle )
        return true;
}
</pre>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="span6 widget">
                                        <div class="widget-content">
                                            <h4>Scrollable Code View</h4>
<pre class="pre-scrollable">
function checkTransitionSupport() {
    var vendorPrefixes = "O Ms Webkit Moz".split( ' ' ),    
        i = vendorPrefixes.length, 
        divStyle = document.createElement('div').style;

    while( i-- ) {
        if( vendorPrefixes[i] + 'Transform' in divStyle && 
            vendorPrefixes[i] + 'TransformOrigin' in divStyle &&
            vendorPrefixes[i] + 'Transition' in divStyle )
            return true;
    }

    return false;
}

$(document).ready(function)() {
    if(checkTransitionSupport()) {
        alert( 'CSS Transformations are supported!' );
    } else {
        alert( 'Your browser is outdated!' );
    }
});
</pre>
                                        </div>
                                    </div>
                                </div>
							</div>
                        </section>
                    </div>
                </div>
            </div>
        </div>
        
        <footer id="footer">
            <div class="footer-left">MoonCake - Responsive Admin Template</div>
            <div class="footer-right"><p>Copyright 2012. All Rights Reserved.</p></div>
        </footer>
        
    </div>

	<!-- Core Scripts -->
	<script src="assets/js/libs/jquery-1.8.2.min.js"></script>
	<script src="bootstrap/js/bootstrap.min.js"></script>
	<script src="assets/js/libs/jquery.placeholder.min.js"></script>
	<script src="assets/js/libs/jquery.mousewheel.min.js"></script>
    
    <!-- Template Script -->
    <script src="assets/js/template.js"></script>
    <script src="assets/js/setup.js"></script>

    <!-- Customizer, remove if not needed -->
    <script src="assets/js/customizer.js"></script>

    <!-- Uniform Script -->
    <script src="plugins/uniform/jquery.uniform.min.js"></script>

    <!-- Google Prettify Script -->
    <script src="plugins/prettify/prettify.js"></script>

    <!-- jquery-ui Scripts -->
    <script src="assets/jui/js/jquery-ui-1.8.24.min.js"></script>
    <script src="assets/jui/jquery-ui.custom.min.js"></script>
    <script src="assets/jui/timepicker/jquery-ui-timepicker.min.js"></script>
	<script src="assets/jui/jquery.ui.touch-punch.min.js"></script>
    
    <!-- Plugin Scripts -->

    <!-- Demo Scripts -->
    <script>
        $(document).ready(function() {
            if($.isFunction(prettyPrint))
                prettyPrint.call(this);
        });
    </script>

</body>

</html>
